import React from 'react';
import {inject, observer} from 'mobx-react';
import {WeaRightMenu, WeaDialog, WeaTable, WeaFormItem, WeaInput, WeaSelect, WeaLocaleProvider} from "ecCom";
import {Row, Col, Modal} from "antd";

const getLabel = WeaLocaleProvider.getLabel;

/**
 * 绩效-考核方案-指标方案列表
 * jiansong 2020/3/16
 */
@inject("programViewStore")
@observer
export default class ProgramBrowser extends React.Component {

    constructor(props) {
        super(props);
        this.store = this.props.programViewStore;
    }

    render() {
        let {getType, getStatus, typeOption, statusOption, closeItemForm, showItemDialog, quoteTitle, data, total, quoteParams: {programname, programtype, status, current}} = this.store;
        const columns = [
            {
                title: <span>{getLabel('33439', '名称')}</span>,
                dataIndex: 'programname', key: 'programname', width: '40%',
                render: (text, record) => {
                    return <a href='javascript:void(0)'
                              onClick={() => window.open("/spa/workrelate/static/index.html#/main/workrelate/performance/programView?programid=" + record.id)}>{text}</a>
                }
            }, {
                title: <span>{getLabel('500401', '类型')}</span>,
                dataIndex: 'programtype', key: 'programtype', width: '20%',
                render: (text) => getType[text],
            }, {
                title: <span>{getLabel('23247', '状态')}</span>,
                dataIndex: 'status', key: 'status', width: '20%',
                render: (text) => getStatus[text],
            }, {
                title: <span>{getLabel('19548', '生效日期')}</span>,
                dataIndex: 'startdate', key: 'startdate', width: '20%',
            }
        ]
        return (
            <WeaDialog ecId={`${this && this.props && this.props.ecId || ''}_WeaDialog@38kd94`}
                icon='icon-coms-implement'
                iconBgcolor='rgb(150, 53, 138)'
                style={{width: 800, height: 504}}
                hasScroll
                title={getLabel('517034', '指标方案')}
                visible={showItemDialog}
                onCancel={() => {
                    closeItemForm();
                }}
            >
                <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@0okk9c`} style={{padding: '15px'}}>
                    <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@jogyo5`} span={8}>
                        <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@0g0xj2`} label={getLabel('33439', '名称')} labelCol={{span: 6}} wrapperCol={{span: 16}}>
                            <WeaInput ecId={`${this && this.props && this.props.ecId || ''}_WeaInput@2l1lvv`}
                                value={programname}
                                viewAttr={2}
                                onChange={(val) => this.onSearchChange(val, "programname")}
                            />
                        </WeaFormItem>
                    </Col>
                    <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@lfbhqp`} span={8}>
                        <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@wsxs2a`} label={getLabel('500401', '类型')} labelCol={{span: 6}} wrapperCol={{span: 16}}>
                            <WeaSelect ecId={`${this && this.props && this.props.ecId || ''}_WeaSelect@c581ep`}
                                options={typeOption}
                                value={programtype}
                                onChange={(val) => this.onSearchChange(val, "programtype")}
                            />
                        </WeaFormItem>
                    </Col>
                    <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@5ms9go`} span={8}>
                        <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@gi5r2w`} label={getLabel('23247', '状态')} labelCol={{span: 6}} wrapperCol={{span: 16}}>
                            <WeaSelect ecId={`${this && this.props && this.props.ecId || ''}_WeaSelect@22d7r8`}
                                options={statusOption}
                                value={status}
                                onChange={(val) => this.onSearchChange(val, "status")}
                            />
                        </WeaFormItem>
                    </Col>
                </Row>
                <WeaTable ecId={`${this && this.props && this.props.ecId || ''}_WeaTable@riio0m`}
                    columns={columns}
                    dataSource={data}
                    pagination={{
                        total: total,
                        showTotal: () => getLabel(509103, `共{total}条`).replace('{total}', total),
                        current: current,
                        onChange: (current) => this.onSearchChange(current, "current"),
                    }}
                />
            </WeaDialog>
        )
    }

    //搜索条件变化
    onSearchChange(val, type) {
        this.store.quoteParamsChange(val, type);
    }

}